.container {
	main {
		.swiper-container {
			width: 100%;
			height: 200px;
			margin-bottom: 20px;

			.index-swiper1 {
				background: url(../imgs/index-swiper-bg1.jpg) no-repeat;
				background-position: center center;
				background-size: cover;
			}
			.index-swiper2 {
				background: url(../imgs/index-swiper-bg2.jpg) no-repeat;
				background-position: center center;
				background-size: cover;
			}
			.index-swiper3 {
				background: url(../imgs/index-swiper-bg3.jpg) no-repeat;
				background-position: center center;
				background-size: cover;
			}
		}
		.con {
			display: flex;
			flex-wrap: wrap;
			padding: 0 15px;

			div {
				border-radius: 15px;
				margin-bottom: 18px;
			}
			.rank {
				position: relative;
				width: 150px;
				height: 150px;
				background-color: #3ea6e0;
				overflow: hidden;
				margin-right: 22px;
				img {
					position: absolute;
					left: -18px;
					bottom: 10px;
					width: 121px;
					height: 121px;
				}
				p {
					position: absolute;
					top: 8px;
					left: 10px;
					font-size: 16px;
					color: #004e73;
					font-weight: bold;
				}
				span {
					position: absolute;
					bottom: 28px;
					right: 18px;
					font-size: 32px;
					// font-weight: bold;
					color: #fff;
				}
			}
			.card {
				position: relative;
				width: 212px;
				height: 150px;
				background-color: #9fd9f8;
				img {
					position: absolute;
					left: 10px;
					bottom: 10px;
					height: 110px;
				}
				p {
					position: absolute;
					top: 15px;
					left: 15px;
					font-size: 16px;
					color: #005177;
					font-weight: bold;
				}
				span {
					position: absolute;
					right: 15px;
					bottom: 25px;
					width: 100px;
					height: 40px;
					border-radius: 20px;
					border: 2px solid #186285;
					text-align: center;
					line-height: 36px;
				}
				span.punched {
					color: green;
					border-color: green;
					font-weight: normal;
				}
			}
			.data {
				width: 180px;
				height: 110px;
				background: url(../imgs/index-card-data.png) no-repeat center;
				background-size: cover;
				padding: 12px 0 0 14px;
				margin-right: 18px;
				border-radius: 15px;
				margin-bottom: 18px;
				p {
					color: #fff;
					font-weight: bold;
				}
			}
			.badge {
				position: relative;
				width: 185px;
				height: 110px;
				background-color: #9dbde3;
				img {
					position: absolute;
					left: 10px;
					bottom: 0;
					width: 88px;
				}
				p {
					position: absolute;
					top: 12px;
					left: 14px;
					font-weight: bold;
					color: #005177;
					z-index: 1;
				}
				span {
					position: absolute;
					right: 14px;
					bottom: 19px;
					color: #004e73;
					font-weight: bold;
					i {
						position: absolute;
						right: 14px;
						bottom: -19px;
						font-size: 90px;
					}
				}
			}
			.train {
				width: 100%;
				height: 110px;
				background: url(../imgs/index-swiper-bg2.jpg) no-repeat center top;
				background-size: cover;
				padding: 13px 0 0 15px;
				border-radius: 15px;
				margin-bottom: 18px;
				p {
					font-weight: bold;
					color: #fff;
				}
			}
			.run {
				width: 100%;
				height: 110px;
				background: url(../imgs/index-card-run.png) no-repeat center top;
				background-size: cover;
				padding: 13px 0 0 15px;
				p {
					font-weight: bold;
					color: #fff;
				}
			}
		}
	}
}
